<template>
  <!--  currentOption-->
  <div class="chart-container">
    <ECharts
      class="chart"
      :option="currentOption"
      autoresize
      :theme="theme"
      @finished="handleChartReady"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { TreemapChart, SunburstChart } from "echarts/charts";
import VChart from "vue-echarts";
import { color } from "echarts";

use([CanvasRenderer, TreemapChart, SunburstChart]);
Math.random();
// 主题配置（可选）
const theme = ref("light");

// 科学成就数据
const scienceData = ref({
  name: "科学成就",
  children: [
    {
      name: "农学",
      value: 1200,
      children: [
        {
          name: "农书典籍",
          value: 450,
          children: [
            {
              name: "齐民要术(北魏·贾思勰)",
              value: 150,
              desc: "中国现存最早最完整的农书",
            },
            {
              name: "农政全书(明·徐光启)",
              value: 120,
              desc: "集古代农学大成之作",
            },
            { name: "王祯农书(元·王祯)", value: 90, desc: "首创农器图谱" },
            { name: "陈旉农书(宋·陈旉)", value: 60, desc: "首部南方农书" },
            { name: "氾胜之书(汉·氾胜之)", value: 30, desc: "现存最早农书" },
            { name: "四时纂要(唐·韩鄂)", value: 25, desc: "月令体农书" },
            { name: "农桑辑要(元·司农司)", value: 25, desc: "官方农书" },
            { name: "授时通考(清·鄂尔泰)", value: 20, desc: "清代官方农书" },
            { name: "南方草木状(晋·嵇含)", value: 15, desc: "最早植物学著作" },
            { name: "茶经(唐·陆羽)", value: 15, desc: "世界第一部茶学专著" },
          ],
        },
        {
          name: "农具发明",
          value: 380,
          children: [
            { name: "曲辕犁(唐代)", value: 100, desc: "耕犁革命性改进" },
            { name: "筒车(唐代)", value: 90, desc: "高效提水灌溉工具" },
            { name: "耧车(汉代)", value: 70, desc: "播种机械" },
            { name: "翻车(汉代)", value: 50, desc: "龙骨水车" },
            { name: "水碓(汉代)", value: 30, desc: "水力谷物加工" },
            { name: "风扇车(汉代)", value: 25, desc: "谷物清选机械" },
            { name: "连枷(先秦)", value: 15, desc: "脱粒工具" },
            { name: "碌碡(汉代)", value: 15, desc: "碾压脱粒工具" },
            { name: "桔槔(春秋)", value: 10, desc: "杠杆提水工具" },
            { name: "砻(汉代)", value: 10, desc: "稻谷脱壳工具" },
            { name: "秧马(宋代)", value: 10, desc: "水稻移栽工具" },
            { name: "耘荡(元代)", value: 10, desc: "中耕除草工具" },
          ],
        },
        {
          name: "耕作技术",
          value: 370,
          children: [
            { name: "代田法(汉代)", value: 100, desc: "赵过创立的轮耕制" },
            { name: "区田法(汉代)", value: 90, desc: "精耕细作技术" },
            { name: "耕耙耱技术(魏晋)", value: 80, desc: "北方旱作体系" },
            { name: "垄作法(春秋)", value: 50, desc: "最早的耕作方法" },
            { name: "溲种法(汉代)", value: 30, desc: "种子处理技术" },
            { name: "亲田法(明代)", value: 20, desc: "集中施肥技术" },
            { name: "砂田法(清代)", value: 15, desc: "西北抗旱技术" },
            { name: "架田法(宋代)", value: 15, desc: "水上种植技术" },
            { name: "桑基鱼塘(明代)", value: 15, desc: "生态农业模式" },
            { name: "烤田技术(宋代)", value: 10, desc: "水稻田间管理" },
            { name: "套种技术(明代)", value: 10, desc: "多熟种植" },
            { name: "绿肥轮作(晋代)", value: 10, desc: "地力维持技术" },
          ],
        },
      ],
    },
    {
      name: "天文地理",
      value: 1100,
      children: [
        {
          name: "天文仪器",
          value: 400,
          children: [
            { name: "浑天仪(东汉·张衡)", value: 150, desc: "水力驱动天文仪器" },
            { name: "简仪(元·郭守敬)", value: 120, desc: "简化浑仪" },
            { name: "圭表(商周)", value: 100, desc: "测日影定节气" },
            { name: "水运仪象台(宋·苏颂)", value: 80, desc: "天文钟鼻祖" },
            { name: "仰仪(元·郭守敬)", value: 50, desc: "日食观测仪" },
            { name: "象限仪(明)", value: 30, desc: "测量天体高度" },
            { name: "天体仪(清)", value: 25, desc: "天体运行演示" },
            { name: "玑衡抚辰仪(清)", value: 20, desc: "乾隆时期大型仪器" },
            { name: "漏壶(汉代)", value: 15, desc: "计时仪器" },
            { name: "日晷(汉代)", value: 15, desc: "太阳计时器" },
            { name: "星晷(明代)", value: 10, desc: "恒星时测量" },
            { name: "正方案(元代)", value: 10, desc: "测向仪器" },
          ],
        },
        {
          name: "历法体系",
          value: 350,
          children: [
            { name: "授时历(元·郭守敬)", value: 120, desc: "古代最精确历法" },
            { name: "大衍历(唐·一行)", value: 100, desc: "唐代优秀历法" },
            { name: "大明历(南北朝·祖冲之)", value: 80, desc: "引入岁差" },
            { name: "太初历(汉·落下闳)", value: 60, desc: "第一部完整历法" },
            { name: "戊寅元历(唐·傅仁均)", value: 30, desc: "首次废除平朔" },
            { name: "乾象历(汉·刘洪)", value: 25, desc: "首部引入月行迟疾" },
            { name: "皇极历(隋·刘焯)", value: 20, desc: "等间距二次差内插法" },
            { name: "钦天历(五代·王朴)", value: 15, desc: "五代优秀历法" },
            { name: "时宪历(清·汤若望)", value: 15, desc: "采用西洋历法" },
            { name: "统天历(宋·杨忠辅)", value: 15, desc: "发现岁实消长" },
            { name: "纪元历(宋·姚舜辅)", value: 10, desc: "宋代优秀历法" },
            { name: "周髀算经(汉代)", value: 10, desc: "盖天说代表作" },
          ],
        },
        {
          name: "天文观测",
          value: 350,
          children: [
            { name: "敦煌星图(唐代)", value: 120, desc: "世界最早星图" },
            { name: "苏州石刻天文图(宋代)", value: 100, desc: "宋代全天星图" },
            { name: "甘石星经(战国)", value: 80, desc: "最早天文著作" },
            { name: "新仪象法要(宋代)", value: 50, desc: "天文仪器专著" },
            { name: "五星占(汉代)", value: 30, desc: "帛书天文记录" },
            { name: "天文气象杂占(汉代)", value: 25, desc: "彗星图谱" },
            { name: "开元占经(唐代)", value: 20, desc: "天文占星汇编" },
            { name: "灵台秘苑(北周)", value: 15, desc: "星官系统著作" },
            { name: "乙巳占(唐代)", value: 15, desc: "李淳风天文著作" },
            { name: "全天星表(清代)", value: 15, desc: "钦天监星表" },
            { name: "彗星观测记录(春秋)", value: 10, desc: "哈雷彗星最早记录" },
            { name: "太阳黑子记录(汉代)", value: 10, desc: "世界最早记录" },
          ],
        },
      ],
    },
    {
      name: "数学",
      value: 950,
      children: [
        {
          name: "数学专著",
          value: 400,
          children: [
            { name: "九章算术(汉代)", value: 150, desc: "古代数学体系形成" },
            { name: "数书九章(宋·秦九韶)", value: 120, desc: "大衍求一术" },
            { name: "测圆海镜(金·李冶)", value: 100, desc: "天元术代表作" },
            { name: "四元玉鉴(元·朱世杰)", value: 80, desc: "四元高次方程组" },
            { name: "周髀算经(汉代)", value: 50, desc: "勾股定理最早记述" },
            { name: "孙子算经(南北朝)", value: 30, desc: "物不知数问题" },
            { name: "张丘建算经(南北朝)", value: 25, desc: "百鸡问题" },
            { name: "缉古算经(唐·王孝通)", value: 20, desc: "三次方程应用" },
            { name: "益古演段(元·李冶)", value: 15, desc: "天元术入门" },
            { name: "算学启蒙(元·朱世杰)", value: 15, desc: "数学教育著作" },
            { name: "同文算指(明·李之藻)", value: 10, desc: "介绍西方算术" },
            {
              name: "割圆密率捷法(清·明安图)",
              value: 10,
              desc: "无穷级数研究",
            },
          ],
        },
        {
          name: "数学成就",
          value: 350,
          children: [
            {
              name: "圆周率计算(南北朝·祖冲之)",
              value: 120,
              desc: "精确到小数点后7位",
            },
            { name: "天元术(金元)", value: 100, desc: "代数方程理论" },
            { name: "四元术(元代)", value: 80, desc: "多元高次方程组" },
            { name: "大衍求一术(宋代)", value: 60, desc: "中国剩余定理" },
            { name: "勾股定理(商周)", value: 50, desc: "几何基本定理" },
            { name: "盈不足术(汉代)", value: 30, desc: "双假设法" },
            { name: "开方术(宋代)", value: 25, desc: "高次方程数值解" },
            { name: "垛积术(元代)", value: 20, desc: "高阶等差级数" },
            { name: "招差术(元代)", value: 15, desc: "有限差分法" },
            { name: "割圆术(三国·刘徽)", value: 15, desc: "极限思想萌芽" },
            { name: "重差术(三国·刘徽)", value: 10, desc: "测量远方目标" },
            { name: "纵横图(宋代)", value: 10, desc: "组合数学研究" },
          ],
        },
        {
          name: "算具发展",
          value: 200,
          children: [
            { name: "算筹(先秦)", value: 80, desc: "最早计算工具" },
            { name: "算盘(宋代)", value: 70, desc: "珠算工具" },
            { name: "计算尺(明代)", value: 30, desc: "对数计算工具" },
            { name: "沙盘(汉代)", value: 20, desc: "临时计算工具" },
            { name: "算板(唐代)", value: 15, desc: "格子乘法工具" },
            { name: "算表(汉代)", value: 15, desc: "乘法计算工具" },
            { name: "算珠(元代)", value: 10, desc: "算盘前身" },
            { name: "算袋(唐代)", value: 10, desc: "算筹携带工具" },
            { name: "算筹记数法(汉代)", value: 10, desc: "十进制位值制" },
            { name: "算经十书(唐代)", value: 10, desc: "官方数学教材" },
            { name: "算学馆(唐代)", value: 10, desc: "官方数学教育" },
            { name: "算学家传记(历代)", value: 10, desc: "数学发展记录" },
          ],
        },
      ],
    },
    {
      name: "医学",
      value: 1300,
      children: [
        {
          name: "医学典籍",
          value: 500,
          children: [
            {
              name: "黄帝内经(战国秦汉)",
              value: 150,
              desc: "中医理论奠基之作",
            },
            { name: "伤寒杂病论(汉·张仲景)", value: 140, desc: "临床医学经典" },
            { name: "本草纲目(明·李时珍)", value: 120, desc: "药物学巨著" },
            { name: "千金方(唐·孙思邈)", value: 90, desc: "临床百科全书" },
            { name: "神农本草经(汉代)", value: 60, desc: "最早药物学专著" },
            { name: "难经(战国)", value: 50, desc: "中医理论著作" },
            { name: "外台秘要(唐·王焘)", value: 40, desc: "唐代医学汇编" },
            { name: "肘后备急方(晋·葛洪)", value: 30, desc: "急救手册" },
            { name: "针灸甲乙经(晋·皇甫谧)", value: 25, desc: "针灸学经典" },
            { name: "诸病源候论(隋·巢元方)", value: 20, desc: "病因证候学" },
            { name: "洗冤集录(宋·宋慈)", value: 15, desc: "世界最早法医学" },
            { name: "温病条辨(清·吴瑭)", value: 15, desc: "温病学代表作" },
          ],
        },
        {
          name: "诊疗技术",
          value: 400,
          children: [
            { name: "脉诊(战国)", value: 120, desc: "独特诊断方法" },
            { name: "针灸(新石器时代)", value: 110, desc: "经络治疗体系" },
            { name: "外科手术(汉代)", value: 90, desc: "华佗麻醉手术" },
            { name: "舌诊(元代)", value: 50, desc: "望诊重要内容" },
            { name: "推拿(先秦)", value: 40, desc: "手法治疗技术" },
            { name: "拔罐(晋代)", value: 30, desc: "物理疗法" },
            { name: "刮痧(元代)", value: 25, desc: "民间疗法" },
            { name: "导引(汉代)", value: 20, desc: "医疗体操" },
            { name: "放血疗法(唐代)", value: 15, desc: "刺络疗法" },
            { name: "药熨(汉代)", value: 15, desc: "热敷疗法" },
            { name: "熏蒸(宋代)", value: 10, desc: "药汽疗法" },
            { name: "蜡疗(唐代)", value: 10, desc: "热蜡疗法" },
          ],
        },
        {
          name: "药学发展",
          value: 400,
          children: [
            { name: "药物分类(汉代)", value: 120, desc: "三品分类法" },
            { name: "方剂学(汉代)", value: 110, desc: "复方配伍理论" },
            { name: "炮制技术(南北朝)", value: 90, desc: "雷公炮炙论" },
            { name: "道地药材(唐代)", value: 50, desc: "优质药材概念" },
            { name: "药物栽培(明代)", value: 40, desc: "人工种植技术" },
            { name: "药性理论(汉代)", value: 30, desc: "四气五味" },
            { name: "制剂技术(唐代)", value: 25, desc: "丸散膏丹" },
            { name: "药物鉴定(宋代)", value: 20, desc: "真伪鉴别" },
            { name: "食疗本草(唐代)", value: 15, desc: "食物疗法" },
            { name: "海洋药物(明代)", value: 15, desc: "海药本草" },
            { name: "民族医药(历代)", value: 10, desc: "藏蒙维医药" },
            { name: "外来药物(历代)", value: 10, desc: "丝绸之路传入" },
          ],
        },
      ],
    },
    {
      name: "工程技术",
      value: 1200,
      children: [
        {
          name: "建筑工程",
          value: 400,
          children: [
            { name: "应县木塔(辽代)", value: 120, desc: "世界最高木构建筑" },
            { name: "赵州桥(隋·李春)", value: 110, desc: "最早敞肩石拱桥" },
            { name: "故宫建筑(明清)", value: 90, desc: "古代建筑集大成" },
            { name: "长城(历代)", value: 50, desc: "军事防御工程" },
            { name: "大雁塔(唐代)", value: 40, desc: "砖仿木结构" },
            { name: "悬空寺(北魏)", value: 30, desc: "悬崖建筑奇观" },
            { name: "卢沟桥(金代)", value: 25, desc: "联拱石桥典范" },
            { name: "天坛祈年殿(明代)", value: 20, desc: "木构圆形建筑" },
            { name: "佛光寺大殿(唐代)", value: 15, desc: "现存最早木构" },
            { name: "苏州园林(明清)", value: 15, desc: "园林艺术典范" },
            { name: "晋祠圣母殿(宋代)", value: 10, desc: "宋代建筑代表" },
            { name: "客家土楼(明清)", value: 10, desc: "防御性民居" },
          ],
        },
        {
          name: "水利工程",
          value: 350,
          children: [
            { name: "都江堰(秦·李冰)", value: 120, desc: "无坝引水工程" },
            { name: "大运河(隋代)", value: 100, desc: "世界最长运河" },
            { name: "海塘工程(唐代)", value: 80, desc: "海岸防御工程" },
            { name: "灵渠(秦代)", value: 50, desc: "连通湘漓水系" },
            { name: "芍陂(春秋)", value: 30, desc: "最早蓄水工程" },
            { name: "郑国渠(战国)", value: 25, desc: "关中灌溉工程" },
            { name: "它山堰(唐代)", value: 20, desc: "阻咸蓄淡工程" },
            { name: "木兰陂(宋代)", value: 15, desc: "福建水利工程" },
            { name: "鉴湖(汉代)", value: 15, desc: "江南最早水库" },
            { name: "坎儿井(汉代)", value: 10, desc: "新疆灌溉系统" },
            { name: "浮山堰(南北朝)", value: 10, desc: "军事水利工程" },
            { name: "通惠河(元代)", value: 10, desc: "京杭运河末端" },
          ],
        },
        {
          name: "机械制造",
          value: 450,
          children: [
            { name: "地动仪(汉·张衡)", value: 150, desc: "地震监测仪器" },
            { name: "水运仪象台(宋·苏颂)", value: 120, desc: "天文钟鼻祖" },
            { name: "纺织机械(元代)", value: 90, desc: "大纺车等发明" },
            { name: "指南车(传说黄帝)", value: 50, desc: "机械定向装置" },
            { name: "记里鼓车(汉代)", value: 40, desc: "里程记录装置" },
            { name: "木牛流马(三国·诸葛亮)", value: 30, desc: "运输工具" },
            { name: "连机碓(汉代)", value: 25, desc: "水力粮食加工" },
            { name: "水排(汉代)", value: 20, desc: "水力鼓风装置" },
            { name: "浑象(汉代)", value: 15, desc: "天体演示仪器" },
            { name: "自鸣钟(明代)", value: 15, desc: "机械计时器" },
            { name: "铜壶滴漏(汉代)", value: 10, desc: "精密计时器" },
            { name: "候风羽(汉代)", value: 10, desc: "风向测定装置" },
          ],
        },
      ],
    },
    {
      name: "综合",
      value: 800,
      children: [
        {
          name: "地理学",
          value: 300,
          children: [
            { name: "水经注(北魏·郦道元)", value: 120, desc: "地理学巨著" },
            { name: "徐霞客游记(明·徐弘祖)", value: 100, desc: "岩溶地貌考察" },
            { name: "禹贡地域图(晋·裴秀)", value: 80, desc: "制图六体理论" },
            { name: "海国图志(清·魏源)", value: 50, desc: "世界地理著作" },
            { name: "大唐西域记(唐·玄奘)", value: 30, desc: "西域地理记录" },
            { name: "郑和航海图(明)", value: 25, desc: "航海地图" },
            { name: "华夷图(宋代)", value: 20, desc: "石刻世界地图" },
            { name: "广舆图(明代)", value: 15, desc: "综合性地图集" },
            { name: "舆地图(元代)", value: 15, desc: "朱思本绘制" },
            { name: "皇舆全览图(清代)", value: 10, desc: "全国实测地图" },
            { name: "山海经(先秦)", value: 10, desc: "早期地理著作" },
            { name: "元和郡县图志(唐代)", value: 10, desc: "最早全国地理总志" },
          ],
        },
        {
          name: "冶金技术",
          value: 250,
          children: [
            { name: "铸铁柔化术(春秋)", value: 100, desc: "可锻铸铁技术" },
            { name: "灌钢法(南北朝)", value: 80, desc: "高效炼钢技术" },
            { name: "胆水炼铜(宋代)", value: 70, desc: "湿法冶金技术" },
            { name: "青铜冶铸(商周)", value: 50, desc: "范铸法失蜡法" },
            { name: "百炼钢(汉代)", value: 30, desc: "反复锻打工艺" },
            { name: "炒钢法(汉代)", value: 25, desc: "生铁脱碳技术" },
            { name: "黄铜冶炼(明代)", value: 20, desc: "金属锌制备" },
            { name: "镍白铜(汉代)", value: 15, desc: "铜镍合金" },
            { name: "金银错(战国)", value: 15, desc: "金属镶嵌工艺" },
            { name: "鎏金技术(汉代)", value: 10, desc: "表面装饰工艺" },
            { name: "铁范铸造(战国)", value: 10, desc: "金属型铸造" },
            { name: "坩埚炼铁(汉代)", value: 10, desc: "高温冶炼技术" },
          ],
        },
        {
          name: "纺织技术",
          value: 250,
          children: [
            { name: "提花机(汉代)", value: 100, desc: "复杂织物编织" },
            { name: "缫丝技术(新石器时代)", value: 80, desc: "丝绸生产基础" },
            { name: "纺车(汉代)", value: 70, desc: "纤维加工工具" },
            { name: "缎纹组织(宋代)", value: 50, desc: "高级织物结构" },
            { name: "蜡染技术(汉代)", value: 30, desc: "防染印花工艺" },
            { name: "夹缬(唐代)", value: 25, desc: "雕版印花技术" },
            { name: "织金锦(元代)", value: 20, desc: "加金织物" },
            { name: "云锦(明代)", value: 15, desc: "南京特色织锦" },
            { name: "蜀锦(汉代)", value: 15, desc: "四川传统织锦" },
            { name: "宋锦(宋代)", value: 10, desc: "苏州特色织锦" },
            { name: "壮锦(宋代)", value: 10, desc: "壮族传统织锦" },
            { name: "黎锦(宋代)", value: 10, desc: "黎族传统织锦" },
          ],
        },
      ],
    },
  ],
});
const colorData = [
  "#83acae",
  "#5698c3",
  "#407763",
  "#5698c3",
  "#3f366b",
  "#df869a",
  "#488d79",
  "#a9d8ca",
  "#8dc6c2",
  "#e9b5c4",
  "#32898c",
];

// 图表配置
const treemapOption = ref({
  title: {
    text: "中国古代科学成就",
    left: "left",
    top: 8,
    textStyle: {
      color: "#000",
    },
  },
  tooltip: {
    formatter: function (info) {
      const value = info.value;
      const name = info.name;
      const desc = info.data?.desc || "暂无详细描述";
      return [
        '<div style="font-size:14px;color:#666;font-weight:600;">' +
          name +
          "</div>",
        '<div style="margin:5px 0">' + desc + "</div>",
        '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
          info.color +
          '"></span>',
        "成就值: " + value,
      ].join("");
    },
  },
  series: [
    {
      color: colorData,
      type: "treemap",
      id: "echarts-package-size",
      animationDurationUpdate: 1000,
      roam: false,
      nodeClick: undefined,
      data: scienceData.value.children,
      universalTransition: true,
      label: {
        show: true,
      },
      breadcrumb: {
        show: false,
      },
    },
  ],
});

const sunburstOption = ref({
  title: {
    text: "中国古代科学成就",
    left: "left",
    top: 8,
    textStyle: {
      color: "#000",
    },
  },
  tooltip: {
    formatter: function (info) {
      const value = info.value;
      const name = info.name;
      const desc = info.data?.desc || "暂无详细描述";
      return [
        '<div style="font-size:14px;color:#666;font-weight:600;">' +
          name +
          "</div>",
        '<div style="margin:5px 0">' + desc + "</div>",
        '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
          info.color +
          '"></span>',
        "成就值: " + value,
      ].join("");
    },
  },
  series: [
    {
      color: colorData,
      type: "sunburst",
      id: "echarts-package-size",
      radius: ["20%", "90%"],
      animationDurationUpdate: 1000,
      nodeClick: undefined,
      data: scienceData.value.children,
      universalTransition: true,
      itemStyle: {
        borderWidth: 1,
        borderColor: "rgba(255,255,255,.5)",
      },
      label: {
        show: false,
      },
    },
  ],
});

// 图表状态
const currentOption = ref(sunburstOption.value);
let intervalId = null;

// 自动切换逻辑
const startAutoSwitch = () => {
  intervalId = setInterval(() => {
    currentOption.value =
      currentOption.value === treemapOption.value
        ? sunburstOption.value
        : treemapOption.value;
  }, 3000);
};

// 生命周期
onMounted(startAutoSwitch);
onBeforeUnmount(() => clearInterval(intervalId));

// 图表就绪回调
const handleChartReady = (chartInstance) => {
  // 可在此添加自定义交互逻辑
  chartInstance?.on("click", (params) => {
    console.log("点击数据项:", params);
  });
};
</script>

<style scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.chart {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
